/**
 * @desc: 合格证模板
 * @author: binlety
 */
import React, { useState, useEffect } from 'react'
import CommonLoading from '@/components/CommonLoading';
import FooterToolbar from '@/components/FooterToolbar'
import CommonPagination from '@/components/CommonPagination'
import SearchContent from './component/SearchContent.jsx'
import TableList from './component/TableList.jsx'
import { getTableListOp } from './service'

const initPagination =  {
  current: 1,
  total: 0,
  pageSize: 10,
  showSizeChange: true,
  showQuickJumper: true,
}//初始化分页

const QualificationTemplate = () => {
  const [loading, setLoading] = useState(false);//loading
  const [query, setQuery] = useState({});//表单参数
  const [data, setData] = useState([]);//表格数据
  const [pagination, setPage] = useState({...initPagination})

  useEffect(()=>{
    getTableList()
  },[pagination])

  //表格数据获取
  const getTableList = async () => {
    setLoading(true)
    const { success, data } = await getTableListOp({
      ...query,
      size:pagination.pageSize,
      current:pagination.current
    })
    if(success){
      const { records = [], total } = data
      setData(records)
      pagination.total = total
      setPage(pagination)
    }
    setLoading(false)
  }

  //表单区
  const SearchContentProps = {
    query,
    queryChangeFunc(value, bool){
      if(bool){
        setQuery({})
        setPage({...pagination, current:1, total:0})
      }else{
        setQuery(value)
        setPage({...pagination, current:1, total:0})
      }
    }
  }

  //表格区
  const TableProps = {
    data,
    refreshList(){
      setPage({...pagination, current:1, total: 0})
    }
  }

  //分页区
  const pageProps = {
    pagination,
    handleChange(current, size){
      setPage({
        ...pagination,
        current:(current == pagination.current) ? 1 : current,
        pageSize:size
      })
    },
  }

  return (
    <>
      <div className='zjf-container'>
          <p>合格证打印，优先打印商品关联的合格证模板，没有则再打印<span className='common-color9'>“启用”</span>状态下的“默认合格证”</p>
          <SearchContent { ...SearchContentProps }/>
          <TableList { ...TableProps }/>
      </div>
      <FooterToolbar>
          <CommonPagination { ...pageProps }/>
      </FooterToolbar>
      <CommonLoading loading={loading} />
    </>
  )
}

export default React.memo(QualificationTemplate, ()=>{
  return true 
})